<template>
    <div class="listItem">
        <div class="listItemLeft" v-if="!sigleRow">
            <div class="userPic">
                <img src="https://pic4.zhimg.com/80/v2-0da878de3e39ba9f2f535657863987c8_720w.jpg"/>
            </div>
        </div>
        <div :class="sigleRow ? 'listItemRight' : 'listItemRight marleft'"> 
            <div class="userInfo">
                <span>新浪体育</span>
                <span><i></i></span>
            </div>
            <div class="comment">
                <div class="commentContent">
                    大多数人都知道，我们赖以生存的陆地只占地球表面的30%，其余部分都被海洋覆盖。陆地的出现是地球生命史上的一个关键时刻
                </div>
                <div class="originPost">
                    <span>@人民日报</span>
                    ：大多数人都知道，我们赖以生存的陆地只占地球表面的30%，其余部分都被海洋覆盖。陆地的出现是地球生命史上的一个关键时刻
                </div>
            </div>
        </div>
    </div>
</template>

<script>

/**
 * 个人中心列表组件
 * @date 2021-11-09
 */
export default {
    props:{
        // 是否只展示单列
        sigleRow:{
         type:[Boolean,Number],
        },

    }    
}
</script>

<style scoped>
    .listItem{
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #eee;
        padding-bottom: 2.5vh;
        margin-bottom: 2.5vh;
    }
    .listItemLeft{
        width: 5vh;
    }
    .listItemLeft .userPic{
        height: 5vh;
        width: 5vh;
        border-radius: 100%;
        overflow: hidden;
    }
    .listItemLeft .userPic img{
        width: 100%;
        height: 100%;
    }

    /* 右边区域 */
    .listItemRight{
        
    }

    .marleft{
        margin-left: 1.5vh;
    }

    
    .listItemRight .userInfo {
        display: flex;
        justify-content: space-between;
        padding: 1vh 0;
    }

    .listItemRight .userInfo span:nth-child(1){
        font-size: 2.1vh;
        font-weight: bold;
    }

    .listItemRight .userInfo span:nth-child(2) i{
        height: 2vh;
        width: 2vh;
        background-image: url("../../assets/delete.svg");
        display: block;
        background-position: center;
        background-size: 100%;
        opacity: 0.5;
    }
    
    .listItemRight .comment{
        font-size: 2.2vh;
    }

    .listItemRight .comment .originPost{
        background-color: rgba(220, 220, 220, 0.281);
        padding: 1.4vh;
        border-radius: 0.7vh;
        margin-top: 1vh;
        font-size: 2vh;
        line-height: 3vh;
    }

    .listItemRight .comment .originPost span{
        color: dodgerblue;
    }
</style>